<div class="standard-div">
  <div class="project-operations">
    <nz-input-group [nzPrefix]="orgIcon">
      <input type="text" nz-input placeholder="Filter by name" [(ngModel)]="searchValue" i18n-placeholder="@@common.filter-by-name"/>
      <ng-template #orgIcon>
        <i nz-icon nzType="icons:icon-search"></i>
      </ng-template>
    </nz-input-group>
    <button class="standard-btn" nz-button nzType="primary" permission-check [rn]="generalResourceRNPattern.project" [action]="permissionActions.CreateProject" (actionIfAllow)="onCreateProjectClick()">
      <i nz-icon nzType="icons:icon-add"></i>
      <ng-container i18n="@@common.add">Add</ng-container>
    </button>
  </div>
  <div class="project-list">
    <div *ngFor="let project of projects | projectFilter: searchValue" class="project">
      <nz-card nzBorderless>
        <nz-descriptions [nzTitle]="titleTemplate" [nzExtra]="extraTemplate"></nz-descriptions>
        <div class="env-list">
            <div *ngFor="let env of project.environments">
              <div class="env">
                <div class="env-basis">
                  <div>
                    <div class="desc-name">
                      <span i18n="@@commoname">Name</span>
                      <nz-tag nzColor="green" *ngIf="isCurrentEnv(env)" i18n="@@common.current">Current</nz-tag>
                    </div>
                    <div class="desc-content">{{env.name}}</div>
                  </div>
                  <div>
                    <div class="desc-name"><span>Key</span> <i nz-icon i18n-nz-tooltip="@@common.key-input-description" nz-tooltip="We use the key to give you friendly URLs & RNs. Keys should only contain letters, numbers, ., _ or -." nzType="icons:icon-info-outline"></i></div>
                    <div class="desc-content">{{env.key}}</div>
                  </div>
                  <div>
                    <div class="desc-name" i18n="@@common.description">Description</div>
                    <div class="desc-content">{{env.description}}</div>
                  </div>
                </div>
                <div class="env-secret">
                  <div>
                    <div class="desc-name">
                      <span i18n="@@org.project.secrets">Secrets</span>
                      <i class="edit-save" (click)="createSecret(project, env)" nz-icon nzType="icons:icon-add-outline"></i>
                    </div>
                    <div class="desc-content">
                      <div *ngFor="let secret of env.secrets" class="secret">
                        <span class="secret-name" nz-tooltip [nzTooltipTitle]="secret.name">{{secret.name}}</span>
                        <nz-tag nzColor="geekblue" *ngIf="secret.type == SecretTypeEnum.Server" i18n="@@common.server">server</nz-tag>
                        <nz-tag nzColor="cyan" *ngIf="secret.type == SecretTypeEnum.Client" i18n="@@common.client">client</nz-tag>
                        <span class="secret-value" nz-tooltip nzTooltipTitle="Click to copy" i18n-nzTooltipTitle="@@common.click-to-copy" nzTooltipPlacement="top" (click)="copyText(secret.value)">{{secret.value}}</span>
                        <span>
                          <button nz-button nzSize="small" nzType="link" (click)="editSecret(project, env, secret)">
                            <i nz-icon nzType="edit" nzTheme="outline"></i>
                          </button>
                          <button
                            i18n-nz-popconfirm="@@org.project.remove-secret-confirm"
                            nz-popconfirm="This operation cannot be reverted, make sure this secret is removed from all SDKs before removing."
                            nzPopconfirmPlacement="bottomRight"
                            [nzPopconfirmOverlayStyle]="{minWidth: '240px'}"
                            nz-button
                            nzSize="small"
                            nzType="link"
                            nzDanger
                            (nzOnConfirm)="deleteSecret(project, env, secret.id)">
                            <i nz-icon nzType="delete" nzTheme="outline"></i>
                          </button>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="env-operations">
                  <a permission-check [rn]="getEnvRN(project, env)" [action]="permissionActions.UpdateEnvSettings" (actionIfAllow)="onEditEnvClick(project, env)">
                    <span style="color: #23AD7F;" i18n="@@org.project.edit">Edit</span>
                  </a>
                  <ng-container *ngIf="!isCurrentEnv(env)">
                    <nz-divider nzType="vertical"></nz-divider>
                    <a i18n-nz-popconfirm="@@common.remove-confirm" nz-popconfirm="This operation cannot be reverted, are you sure to remove it?"
                       nzPopconfirmPlacement="bottomRight"
                       (nzOnConfirm)="onDeleteEnvClick(project, env)" [nzIcon]="iconTplEnv">
                      <span style="color: #717D8A" i18n="@@common.remove">Remove</span>
                    </a>
                  </ng-container>
                  <ng-template #iconTplEnv>
                    <i nz-icon nzType="question-circle" nzTheme="fill" style="color: #FAAD14;"></i>
                  </ng-template>
                  <nz-divider nzType="vertical"></nz-divider>
                  <a (click)="copyText(env.id)" class="copy-id">
                    <span style="color: #717D8A;" i18n="@@org.project.copy-id">Copy Id</span>
                    <i style="color: #717D8A;" nz-icon i18n-nz-tooltip="@@org.project.env-id-copy-description" nz-tooltip="Copy Id of the environment, the Id is needed when calling FeatBit REST API" nzType="icons:icon-info-outline"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
      </nz-card>
      <ng-template #titleTemplate>
        <div class="project-header">
          <span>{{project.name}}</span>
          <nz-tag nzColor="blue">Key: {{project.key}}</nz-tag>
          <nz-tag nzColor="green" *ngIf="isCurrentProject(project)" i18n="@@common.current">Current</nz-tag>
        </div>
      </ng-template>
      <ng-template #extraTemplate>
        <button class="action-btn" nz-button nzType="default" nzSize="small" permission-check [rn]="permissionsService.getProjectRN(project)" [action]="permissionActions.UpdateProjectSettings" (actionIfAllow)="onEditProjectClick(project)">
          <i nz-icon nzType="icons:icon-edit"></i>
          <ng-container i18n="@@org.project.edit">Edit</ng-container>
        </button>
        <button class="action-btn" nz-button nzType="default" nzSize="small"
                *ngIf="currentProjectEnv?.projectId !== project.id"
                i18n-nz-popconfirm="@@common.remove-confirm"
                nz-popconfirm="This operation cannot be reverted, are you sure to remove it?"
                nzPopconfirmPlacement="bottomRight"
                (nzOnConfirm)="onDeleteProjectClick(project)">
          <i nz-icon nzType="icons:icon-delete"></i>
          <ng-container i18n="@@common.remove">Remove</ng-container>
        </button>
        <button class="action-btn" nz-button nzType="default" nzSize="small"
                permission-check [rn]="permissionsService.getProjectRN(project)" [action]="permissionActions.CreateEnv" (actionIfAllow)="onCreateEnvClick(project)"
                >
          <i style="color: #3CC798" nz-icon nzType="icons:icon-plus"></i>
          <ng-container i18n="@@org.project.addEnv">Add environment</ng-container>
        </button>
      </ng-template>
    </div>
  </div>
</div>
<nz-modal
  [(nzVisible)]="isSecretModalVisible"
  [nzTitle]="secretModalTitle"
  (nzOnCancel)="secretModalCancel()"
  (nzOnOk)="upsertSecret()">
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="secretForm" nzLayout="vertical">
      <nz-form-item>
        <nz-form-label nzRequired i18n="@@common.name">Name</nz-form-label>
        <nz-form-control nzHasFeedback i18n-nzErrorTip="@@common.name-cannot-be-empty" nzErrorTip="Name cannot be empty">
          <input
            nz-input
            formControlName="name"
            placeholder="The name of the secret"
            i18n-placeholder="@@org.project.secret-name"
          />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label
          nzRequired
          i18n="@@org.project.secret-type"
          i18n-nzTooltipTitle="@@org.project.type-description"
          nzTooltipTitle="The secret would be used by a client side or server side SDK">Type</nz-form-label>
        <nz-form-control>
          <nz-select class="nz-select-40" [nzDisabled]="isEditingSecret" formControlName="type">
            <nz-option [nzValue]="SecretTypeEnum.Client" i18n-nzLabel="@@org.project.secret-type-client-side-sdk" nzLabel="Client Side SDK"></nz-option>
            <nz-option [nzValue]="SecretTypeEnum.Server" i18n-nzLabel="@@org.project.secret-type-server-side-sdk" nzLabel="Server Side SDK"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
</nz-modal>

<app-project-drawer [visible]="creatEditProjectFormVisible" (close)="projectClosed($event)" [project]="project"></app-project-drawer>
<app-env-drawer [visible]="creatEditEnvFormVisible" [rn]="getEnvRN(project, env)" (close)="envClosed($event)" [env]="env"></app-env-drawer>
